// 渲染文章

let layer = layui.layer
let form = layui.form
getArr()
function getArr() {
  axios.get('/my/article/cates').then(({ data: { data, message, status } }) => {
    // console.log(res)
    let res = data.map(({ name, alias, Id }) => {
      // console.log(item)
      return `<tr>
    <td>${name}</td>
    <td>${alias}</td>
    <td>
      <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id="${Id}">编辑</button>
      <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete" data-id="${Id}">删除</button>
    </td>
  </tr>`
    }).join('')
    $('tbody').html(res)
  })
}


let arr = ` <form id="addForm" class="layui-form">
<!-- 第一行 分类名称 -->
<div class="layui-form-item">
  <label class="layui-form-label">分类名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第二行 分类别名  -->
<div class="layui-form-item">
  <label class="layui-form-label">分类别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第三行 按钮 -->
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`

let index
// 添加类别
$('#btnAddCate').on('click', (e) => {
  e.preventDefault()
  index = layer.open({
    type: 1,
    content: arr,
    title: ['添加文章类别', 'font-size:18px;'],
    area: ['500px', '300px']
  })
})


// 添加分类 发送ajax请求

// 需使用事件委托
$('body').on('submit', '#addForm', function (e) {
  e.preventDefault()
  let data = $(this).serialize()
  axios.post('/my/article/addcates', data).then(({ data: { message, status } }) => {
    // console.log(res)
    if (status !== 0) {
      return layer.msg(message)
    }
    layer.close(index)
    getArr()
    layer.msg(message)

  })
})


let str = ` 
<form  id="editForm" class="layui-form" lay-filter="formTest">

<!--存id-->
<div class="layui-form-item layui-hide">
  <label class="layui-form-label">分类名称</label>
  <div class="layui-input-block">
    <input type="text" name="Id" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第一行 分类名称 -->
<div class="layui-form-item">
  <label class="layui-form-label">分类名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第二行 分类别名  -->
<div class="layui-form-item">
  <label class="layui-form-label">分类别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第三行 按钮 -->
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
  </div>
</div>
</form>
`
let strIndex
// 编辑功能
$('body').on('click', '.btn_edit', function () {
  let Id = $(this).attr('data-id')

  console.log(Id)
  axios.get(`/my/article/cates/${Id}`).then(({ data: { data, message, status } }) => {
    // console.log(res)
    //给表单赋值
    form.val("formTest", data)

    //获取表单区域所有值

  })
  // 弹出框

  strIndex = layer.open({
    type: 1,
    content: str,
    title: ['编辑文章类别', 'font-size:18px;'],
    area: ['500px', '300px']
  })
})


// 更新
$('body').on('submit', '#editForm', function (e) {
  e.preventDefault()

  let data = $(this).serialize()
  axios.post('/my/article/updatecate', data).then(({ data: { data, message, status } }) => {
    // console.log(res)
    if (status !== 0) {
      return layer.msg(message)
    }
    layer.close(strIndex)
    getArr()
    layer.msg(message)
  })
})

// 删除
$('body').on('click', '.btn_delete', function () {
  let Id = $(this).attr('data-id')
  axios.get(`/my/article/deletecate/${Id}`).then(({ data: { message, status } }) => {
    // console.log(res)
    if (status !== 0){
      return layer.msg(message)
    
    }
    
    getArr()
    layer.msg(message)
  })
})